<template>
  <div class="app_index">
    <!-- <div class="about_item">
        <img src="@/assets/img/aboutusBanner.jpg" class="banner_bg" />
        <div class="about_center">
            <div class="about_left">
                <div class="about_title">关于我们</div>
                <div class="about_content">中国电子“两平台一工程”的重要载体，作为推动智能制造、工业互联网产业发展的平台公司</div>
            </div>
        </div>
    </div> -->
    <div class="app_box">
        <div class="center">
            <div class="navigation">
                <div class="superApp" @click="navTo('/home/about')">工业智能应用</div>
                <p class="symbol">></p>
                <p>应用详情</p>
            </div>
            <el-card class="box-card1">
                <div class="app_card">
                    <div class="appImgBox">
                        <img src='@/assets/img/aboutusBanner.jpg' class="appImg"/>
                    </div>
                    <div class="product_detail">
                        <div class="app_title">
                            应用名称
                        </div>
                        <div class="appName">
                            公司名称
                        </div>
                        <div>
                            <el-tag class="appLabel">分类名</el-tag><el-tag class="appLabel">版本号V1.0</el-tag>
                        </div>
                        <div class="intro_box">
                            <p class="intro_title">
                                产品简介:
                            </p>
                            <p class="intro_details">
                                产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介
                            </p>
                        </div>
                        <div>
                            <el-button class="green_but" size="medium" @click="allInstall">一键安装</el-button>
                            <el-button class="blue_but" size="medium" @click="customInstall">自定义安装</el-button>
                        </div>
                    </div>

                </div>
            </el-card>
            <div class="detailsName">
                应用详情
            </div>
            <el-card class="box-card2">
                <div class="app_detail">
                    《实验室管理系统》是为国家级重点实验室、全国重点中学、公路监管站、大中专院校、研究所、工厂等部门开发的一款软件，软件集实验项目管理、仪器设备管理、易耗品管理、人员情况管理与一体，可以随时查看实验项目统计情况，仪器综合信息情况，易耗品出入库情况及库存情况等。软件界面设计简洁、美观其人性化的管理可以使用户轻易上手，大大节省工作时间，提高工作效率。科学的管理方法会给您带来无限的效益，实验室管理系统将是您明智的选择。 《实验室管理系统》主要功能如下： 基本信息：人员信息、实验室名称、部门名称 实验项目：实验项目、项目查询、期间登记项目统计 仪器设备管理：仪器设备登记、仪器设备维修、仪器设备保养、仪器设备报废、仪器标定录入、仪器借用、正常使用设备统计、设备报废统计、设备保养统计 易耗品管理：易耗品信息、入库登记、出库登记、入库统计、出库统计、库存明细、各实验室库存 
                </div>
            </el-card>
        </div>
    </div>
    

  </div>
</template>

<script>

export default {

    data () {
        return {
            
        }
    },
    methods: {

        allInstall(){
            console.log("一键安装")
        },
        customInstall(){
            console.log("自定义安装")
        },
        navTo(path){
        this.$router.push({ path })
        }
    }
}
</script>

<style lang="less" scoped>


.banner_bg {
    width: 100%;
    height: 560px;
    position: absolute;
    left: 0;
    top: 0;
}
.about_item{
    color: #fff;
    height:560px;
    .about_center {
        position: absolute;
        height:560px;
        left: 50%;
        top: 0;
        width: 1600px;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        .about_left {
            
            display: flex;
            flex-direction: column;
            .about_title {
            color: #fff;
            font-size: 60px;
            margin-bottom: 20px;
            }
            .about_content {
            color: #fff;
            font-size: 30px;
            font-weight: 300;
            margin-top: 10px;
            }
        }
    }
}

.app_box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FBFF;
}
.center {
  width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: left;
  padding: 20px 0 ;
}
.navigation{
    display: flex;
    flex-direction:row;
    margin: 15px 0;
}
.superApp{
    color: #8A97C2;
    padding: 0px;
    font-size: 18px;
    cursor: pointer;
}
.symbol{
    padding: 3px 10px;
}
.box-card1{
    height: 350px;
}

.app_card{
    display: flex;
    flex-direction:row;
}
.appImgBox{
    width: 50%;
    height: 300px;
}
.appImg{
    width: 100%;
    height: 100%;
}

.product_detail{
    display: flex;
    flex-direction:column;
    padding: 0 20px;
}
.app_title{
    font-size: 25px;
    margin-bottom: 10px;
}
.appName{
    font-size: 18px;
}
.appLabel{
    margin: 10px;
}
.intro_box{
    height: 150px;
    padding-top: 10px
}
p{
    margin: 0;
}
.intro_title{
    font-size: 20px;
}
.intro_details{
    color: #b0b0b0;
}
.green_but{
    border: 2px solid #4EE244;
    border-radius:10px;
}
.blue_but{
    border: 2px solid #6D9BF9;
    border-radius:10px;
}
.detailsName{
    font-size: 25px;
    padding: 25px 0 10px 0;
    width: 100px;
    border-bottom: 2px solid #1A62F5;
}
.app_detail{
    padding: 10px;
    font-size: 20px;
    color: #666666;
}
</style>